<template>
	<view>
		<u-navbar title="添加日期" placeholder autoBack>
			<!-- <view class="flexright xiaohui" slot="right" @click="addflshow=true">添加</view> -->
		</u-navbar>
		<view class="mainpadding_top ffffff">
			<view class="flexbetween">
				<view class="titletext bold hei_text">日期</view>
				<!-- <u-icon name="trash" color="#ff0000" size="20"></u-icon> -->
			</view>
			<view class="bghui mainpadding radius margin_top flexbetween" @click="rqclick()">
				<input type="text" placeholder="請選擇日期" class="main_size hei_text bold" disabled v-if="enddate==''" >
				<input type="text" placeholder="請選擇日期" style="width: 100%;" class="main_size hei_text bold" disabled="" v-else :value="startdate+'-'+enddate">
				<u-icon name="arrow-right" color="#999" size="16"></u-icon>
			</view>
			<view class="flexbetween margin_top">
				<view class="titletext bold hei_text">添加時間段</view>
				<view class="addimg" @click="sjdclick"></view>
			</view>
			<view class="flexleft flex_wrap">
				<view class="itemtimebox flexcenter margin_top2" v-for="(item,index) in datedeail" :key="index">
					<view class="itemtime">
						<view class="">{{item}}</view>
						<view class="posidel" @click="datedeail.splice(index,1)">
							<u-icon name="close" color="#fff" size="1"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<timePicker :messageTime="messageTime" @timeConfirm="timeConfirm"></timePicker>
		<view class="mainpadding posibottom" style="bottom: 0;">
			<view class="submitbtn" @click="submit">確認</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				datedeail:[],
				startdate: "",
				enddate: "",
				messageTime: {
					mode: "date",
					timeShow: false,
					title: "請選擇開始時間"
				},
				sjdstart:""
			}
		},
		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.msg))
			if(data.date){
				let arr = data.date.split('-')
				this.startdate = this.http.returnDate(arr[0] * 1000)
				this.enddate = this.http.returnDate(arr[1] * 1000)
			}
			this.datedeail = data.datedeail
		},
		methods: {
			timeConfirm(e) {
				if(this.messageTime.title == "請選擇開始時間"){
					this.startdate = e
					setTimeout(()=>{
						this.messageTime.title  = "請選擇結束時間"
						this.messageTime.mode = "date"
						this.messageTime.timeShow = true
					},100)
				}else if(this.messageTime.title == "請選擇結束時間"){
					this.messageTime.title = "請選擇開始時間"
					this.enddate = e
				}else if(this.messageTime.title == "請選擇開始時間段"){
					this.sjdstart=e
					setTimeout(()=>{
						this.messageTime.title  = "請選擇結束時間段"
						this.messageTime.mode = "time"
						this.messageTime.timeShow = true
					},100)
				}else{
					this.datedeail.push(this.sjdstart+'-'+e)
					console.log(this.datedeail,"099909080");
				}
				
			},
			rqclick(){
				this.messageTime.title  = "請選擇開始時間"
				this.messageTime.mode = "date"
				this.messageTime.timeShow = true
			},
			sjdclick(){
				this.messageTime.title  = "請選擇開始時間段"
				this.messageTime.mode = "time"
				this.messageTime.timeShow = true
			},
			submit(){
				if(this.enddate==""){
					httpRequest.toast("請選擇日期")
					return false
				}
				if(this.datedeail.length==0){
					httpRequest.toast("請添加時間段")
					return false
				}
				let data = {
					datedeail:this.datedeail,
					date:Number(new Date(this.startdate))/1000 + "-" +Number(new Date(this.enddate))/1000
				}
				uni.$emit("selecttimefn",data)
				uni.navigateBack(1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.itemtimebox{
		width: 33.33%;
	}
	.itemtime{
		padding: 30rpx 20rpx; 
		border-radius: 10rpx;
		position: relative;
		background-color:#ffefe7;
		color: #fa5f00;
		font-size: 24rpx
	}
	.posidel{
		position: absolute;
		top: 0;
		right: 0;
		padding: 12rpx 12rpx;
		background-color: #fa5f00;
		border-radius: 0 6px 0 10rpx;
	}
</style>
